<template>
  <div class="home">
    <!-- <BannerBg msg="Welcome to Your Vue.js App"/> -->
	<div class="banner_bg">
		<Nav></Nav>
		<div class="slogan">
		</div>
	</div>
		<div class="dingzhi">
			<HelpMe></HelpMe>
			<SelfCustomization></SelfCustomization>
		</div>
		<div class="banner_bg banner_bg2">
			<div class="picbox">
				<Inspiration></Inspiration>
				<Scenery></Scenery>
				<Scenery></Scenery>
			</div>
		</div>
		
		<div class="centerbox">
			<h2 class="yinxiang">印象</h2>
			<div class="yinxiangbox">
				<Impression></Impression>
				<Impression></Impression>
			</div>
		</div>
  </div>
</template>

<script>
// @ is an alias to /src
import BannerBg from '@/components/BannerBg.vue'
import HelpMe from '@/components/HelpMe.vue'
import SelfCustomization from '@/components/SelfCustomization.vue'
import Inspiration from '@/components/Inspiration.vue'
import Scenery from '@/components/Scenery.vue'
import Impression from '@/components/Impression.vue'

export default {
  name: 'Home',
  components: {
    BannerBg,
	HelpMe,
	SelfCustomization,
	Inspiration,
	Scenery,
	Impression
  }
}
</script>
<style scoped="scoped">
	.banner_bg{
		height: 600px;
		background-image: url(../assets/index_bg.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		margin-top: 0;
		position: relative;
		z-index: -5;
	}
	.banner_bg2{
		height: 900px;
		background-image: url(../assets/index_bg2.jpg);
		background-repeat: no-repeat;
		background-position: center center;
	}
	.slogan{
		width: 380px;
		height: 130px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto; 
		background: url(../assets/index_xiangshou.png)no-repeat;
	}
	.dingzhi{
		display: flex;
	}
	.picbox{
		width: 1200px;
		margin: 0 auto;
	}
	.yinxiang{
		width: 1200px;
		height: 120px;
		margin: 0 auto;
		font-size: 40px;
		color: #2d3a40;
		text-align: center;
		line-height: 120px;
	}
	.yinxiangbox{
		width: 1200px;
		margin: 0 auto;
	}
	.centerbox{
		background-color: #F0F3F5;
	}
</style>